<template>
  <div class="energy-card">
    <div class="card-item">
      <StatusCard :best-machine="bestMachine" :time-data="timeData" :current-data="currentData" :computed-data="computedData" />
    </div>
    <div class="card-item">
      <el-select v-model="valve1" class="selector">
        <el-option v-for="(item,index) in valveType" :key="index" :label="item.label" :value="item.value" />
      </el-select>
      <vechart :options="tcvOptions1" />
    </div>
    <div class="card-item">
      <el-select v-model="valve2" class="selector">
        <el-option v-for="(item,index) in valveType" :key="index" :label="item.label" :value="item.value" />
      </el-select>
      <vechart :options="tcvOptions2" />
    </div>
    <div class="card-item">
      <!-- <el-select v-model="chartType" class="selector">
        <el-option v-for="(item,index) in elecAndEfficiency" :key="index" :label="item.label" :value="item.value" />
      </el-select> -->
      <vechart :options="ivOption" />
    </div>
  </div>
</template>

<script>
Object.assign(Date.prototype, {
  switch(time) {
    const date = {
      'yy': this.getFullYear(),
      'MM': this.getMonth() + 1,
      'dd': this.getDate(),
      'hh': this.getHours(),
      'mm': this.getMinutes(),
      'ss': this.getSeconds()
    }
    if (/(y+)/i.test(time)) {
      time = time.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    Object.keys(date).forEach(function(i) {
      if (new RegExp('(' + i + ')').test(time)) {
        if (RegExp.$1.length === 2) {
          date[i] < 10 ? date[i] = '0' + date[i] : date[i]
        }
        time = time.replace(RegExp.$1, date[i])
      }
    })
    return time
  }
})
import 'element-ui/lib/theme-chalk/index.css'
import scatterOptions from '../json/scatterOptions.json'
import scatterOptions2 from '../json/scatterOptions2.json'
import lineOptions from '../json/lineOptions.json'
export default {
  name: 'EnergyCard1111',
  components: {
    StatusCard: () => import('./StatusCard.vue'),
    vechart: () => import('@components/charts/Vechart.vue')
  },
  props: {
    computedData: {
      type: Object,
      default: () => {}
    },
    timeData: {
      type: Object,
      default: () => {}
    },
    last7Data: {
      type: Array,
      default: () => []
    },
    currentData: {
      type: Object,
      default: () => {}
    },
    bestMachine: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      scatterOptions: scatterOptions,
      scatterOptions2: scatterOptions2,
      lineOptions: lineOptions,
      valve1: 'tcv01',
      valve2: 'tcv02',
      chartType: 'MAU能效',
      valveType: [{
        value: 'tcv01',
        label: '预热阀开度'
      }, {
        value: 'tcv02',
        label: '预冷阀开度'
      }, {
        value: 'tcv03',
        label: '增温加湿阀开度'
      }, {
        value: 'tcv04',
        label: '再冷阀开度'
      }, {
        value: 'tcv05',
        label: '再热阀开度'
      }]
      // elecAndEfficiency: [{
      //   value: 'MAU能效',
      //   label: 'MAU能效'
      // }, {
      //   value: 'MAU用电量',
      //   label: 'MAU用电量'
      // }]
    }
  },
  computed: {
    tcvData() {
      if (this.last7Data.length) {
        return this.last7Data.filter(e => e.tag_id.split('0')[0] === 'tcv')
      } else {
        return null
      }
    },
    ivData() {
      if (this.last7Data.length && this.currentData) {
        const area = parseFloat(this.currentData.info.area)
        const iv = this.last7Data.find(e => e.tag_id === 'iv')
        iv.value.map(e => {
          return e.value * area
        })
        return iv
      } else {
        return null
      }
    },
    pData() {
      if (this.last7Data.length) {
        return this.last7Data.find(e => e.tag_id === 'p')
      } else {
        return null
      }
    },
    tcvOptions1() {
      if (this.tcvData) {
        const valve1 = this.valve1
        const data = this.tcvData.find(e => e.tag_id === valve1)
        if (data && data.format_time && data.value) {
          const arr = []
          data.format_time.forEach((item, index) => {
            const i = [data.format_time[index], data.value[index]]
            arr.push(i)
          })
          const formatter = function(value, index) {
            return new Date(Date.parse(value)).switch('MM月dd日')
          }
          return { ...this.scatterOptions, xAxis: { ...this.scatterOptions.xAxis, axisLabel: { ...this.scatterOptions.xAxis.axisLabel, formatter: formatter }}, series: [{ ...this.scatterOptions.series[0], data: arr }] }
        } else {
          return this.scatterOptions
        }
      } else {
        return this.scatterOptions
      }
    },
    tcvOptions2() {
      if (this.tcvData) {
        const valve2 = this.valve2
        const data = this.tcvData.find(e => e.tag_id === valve2)
        if (data && data.format_time && data.value) {
          const arr = []
          data.format_time.forEach((item, index) => {
            const i = [data.format_time[index], data.value[index]]
            arr.push(i)
          })
          const formatter = function(value, index) {
            return new Date(Date.parse(value)).switch('MM月dd日')
          }
          return { ...this.scatterOptions, xAxis: { ...this.scatterOptions.xAxis, axisLabel: { ...this.scatterOptions.xAxis.axisLabel, formatter: formatter }}, series: [{ ...this.scatterOptions.series[0], data: arr }] }
        } else {
          return this.scatterOptions
        }
      } else {
        return this.scatterOptions
      }
    },
    ivOption() {
      if (this.ivData && this.ivData.format_time && this.ivData.value && this.pData && this.pData.format_time && this.pData.value) {
        const arr1 = []
        this.ivData.format_time.forEach((item, index) => {
          const i = [this.ivData.format_time[index], this.ivData.value[index]]
          arr1.push(i)
        })
        const arr2 = []
        this.pData.format_time.forEach((item, index) => {
          const i = [this.pData.format_time[index], this.pData.value[index]]
          arr2.push(i)
        })
        const formatter = function(value, index) {
          return new Date(Date.parse(value)).switch('MM月dd日')
        }
        return { ...this.scatterOptions2, xAxis: { ...this.scatterOptions2.xAxis, axisLabel: { ...this.scatterOptions2.xAxis.axisLabel, formatter: formatter }}, series: [{ ...this.scatterOptions2.series[0], data: arr2 }, { ...this.scatterOptions2.series[1], data: arr1 }] }
      } else {
        return this.scatterOptions2
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.energy-card{
  width: 100%;
  min-height: 18rem;
  display: flex;
  justify-content: space-between;
  flex: 1;
  margin-bottom: 1rem;
  max-height: 20rem;
}
.card-item{
  flex: 1;
  position: relative;
}
.selector{
  position: absolute;
  top: 1%;
  right: 5%;
  z-index: 9;
}

</style>
<style>
.selector .el-input--suffix .el-input__inner{
  width: 12rem;
  height: 2rem;
  line-height: 2rem;
  background: transparent;
  border: 1.5px solid rgba(233, 232, 232, 0.5);
  border-radius: 0;
  padding:0 0 0 1rem;
  margin-left: 1rem;
  color: #FFF;
  font-size: 1rem;
}
.selector span .el-input__icon{
  line-height: 2rem;
}
.selector .el-input__suffix{
  right: 0;
}
.el-select-dropdown .el-select-dropdown__item.selected {
    font-weight: 600;
}
.el-select-dropdown .el-select-dropdown__item {
    font-size: 1.3rem;
    padding: 0 10px;
    height: 2.2rem;
    line-height: 2.2rem;
    color: #fff;
}
.el-select-dropdown{
  border-radius: 0!important;
  background-color: #0b1c4a!important;
  border: 1px solid #fff!important;
}
.el-select-dropdown__item.selected{
  color: #00f4ff !important;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background: transparent!important;
}
</style>
